<script src="/js/masonry.pkgd.min.js"></script>
<div id="bloglist" class="row">
	<?php if (!empty($data)) foreach($data as $item){?>
         <div class="col-xs-6 col-sm-4 col-md-3">
          <div class="blog-item blog-quote">
            <div class="quote quote-primary">
                <a href="/details/<?php echo $item['Post']['shortLink'];?>">
                  <?php echo $item['Post']['title'];?>
                  <small class="quote-author"><?php echo $item['User']['username'];?></small>
                </a>
              </div>
          </div><!-- blog-item -->
        </div><!-- col-xs-6 -->
        <?php }?>
        
 </div>
 <?php echo $this->element('pagination', array('Paginator' => $this->Paginator));?>
 <script>
  jQuery(window).load(function(){
  
    var container = document.querySelector('#bloglist');
    var msnry = new Masonry( container, {
      // options
      columnWidth: '.col-xs-6',
      itemSelector: '.col-xs-6'
    });
    
    // check on load
    if(jQuery(window).width() <= 480 )
        msnry.destroy();

    // check on resize
    jQuery(window).resize(function(){
        if(jQuery(this).width() <= 480 )
            msnry.destroy();
    });

  });
  
</script>
 